<!--
 * @Author: Bennent_G
 * @Date: 2024-12-23 16:14:13
 * @LastEditTime: 2025-03-27 19:50:59
 * @Description: dictionary module view
-->

<template>
	<!--  -->
	<el-card class="mb-16">
		<el-collapse v-model="activeKey" class="page-header-container">
			<el-collapse-item name="1">
				<template #title>
					搜索
					<el-icon class="header-icon">
						<Search />
					</el-icon>
				</template>
				<el-form inline :model="searchForm">
					<el-form-item label="字典CODE">
						<el-input v-model="searchForm.nickName" placeholder="请输入" />
					</el-form-item>
					<el-form-item label="字典名称">
						<el-input v-model="searchForm.mobile" placeholder="请输入" />
					</el-form-item>
					<el-form-item label="字典状态">
						<el-select v-model="searchForm.sex" placeholder="请选择">
							<el-option value="">全部</el-option>
							<el-option value="1">正常</el-option>
							<el-option value="0">禁用</el-option>
						</el-select>
					</el-form-item>
					<el-form-item>
						<el-button type="primary">搜索</el-button>
					</el-form-item>
				</el-form>
			</el-collapse-item>
		</el-collapse>
	</el-card>
	<!--  -->
	<el-card>
		<template #header>
			<el-space>
				<el-button type="primary" size="small" @click="openModal('add')">创建字典</el-button>
			</el-space>
		</template>
		<el-table :data="data" style="width: 100%" border>
			<el-table-column prop="id" label="ID" align="center" />
			<el-table-column prop="code" label="字典CODE" align="center" />
			<el-table-column prop="name" label="字典名称" align="center" />
			<el-table-column label="字典结构" align="center">
				<template #default="scope">
					<el-tag v-if="scope.row.structure === 'tree'">树形</el-tag>
					<el-tag v-else>键值对</el-tag>
				</template>
			</el-table-column>
			<el-table-column label="字典项" align="center">
				<template #default="scope">
					<el-popover placement="right" :width="500" trigger="click">
						<template #reference>
							<div>字典项信息</div>
						</template>
						<template #default>
							<el-table :data="scope.row.items">
								<el-table-column prop="name" label="字典项值" width="120" />
								<el-table-column label="字典项名称" prop="value" width="120" />
								<el-table-column label="字典项描述" prop="desc" width="120" />
								<el-table-column label="操作" width="140">
									<template #default="scope">
										<el-button type="text" primary size="small">编辑</el-button>
										<el-button type="text" danger size="small">删除</el-button>
									</template>
								</el-table-column>
							</el-table>
						</template>
					</el-popover>
				</template>
			</el-table-column>
			<el-table-column label="字典状态" align="center">
				<template #default="scope">
					<el-tag v-if="scope.row.status === 1">正常</el-tag>
					<el-tag v-else>禁用</el-tag>
				</template>
			</el-table-column>
			<el-table-column label="操作" align="center" fixed="right" width="180">
				<template #default="scope">
					<el-space :size="8">
						<el-button text size="small" @click="openModal('edit', scope.row.id)">编辑</el-button>
						<el-popconfirm title="确认删除吗?" confirm-button-text="确认" cancel-button-text="取消"
							@confirm="handleDelete(record.id)">
							<template #reference>
								<el-button text type="danger" size="small">删除</el-button>
							</template>
						</el-popconfirm>
					</el-space>
				</template>
			</el-table-column>
		</el-table>
	</el-card>

	<!-- 用户表单弹窗 -->
	<DictionaryFormModal v-model="visible" :title="title" :id="currentId" />
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import useNotificationHook from "@/hooks/common/useNotificationHook";
import type { AnyObject } from "@/views/global";
import { fetchDictionary } from "@/apis/admin/setting";
import DictionaryFormModal from "@/components/admin/systems/dictionary/DictionaryFormModal.vue";

interface DictionaryItem {
	name: string;
	value: string;
	desc: string;
}

interface Dictionary {
	id: number;
	code: string;
	name: string;
	type: string;
	structure: string;
	description: string;
	status: string;
	items: DictionaryItem[];
}
const data = ref<Dictionary[]>();
const getDictionaryData = () => {
	fetchDictionary<Dictionary[]>().then((res) => {
		data.value = res.data;
	});
};
onMounted(() => {
	getDictionaryData();
});

// const rowSelection: TableProps['rowSelection'] = {
// 	onChange: (selectedRowKeys: string[], selectedRows: DataType[]) => {
// 		console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
// 	},
// 	getCheckboxProps: (record: DataType) => ({
// 		disabled: record.name === 'Disabled User', // Column configuration not to be checked
// 		name: record.name,
// 	}),
// };
// search
const activeKey = ref<string[]>(['1']);
const searchForm = ref<AnyObject>({
	nickName: '',
	sex: '',
	status: '',
	mobile: ''
});

// 通知
const { openNotifation } = useNotificationHook();

// 删除
const handleDelete = (record: AnyObject) => {
	console.log(record);
	// #TODO:  API调用
	openNotifation({
		type: 'success',
		message: '删除成功',
	});
};

const visible = ref<boolean>(false);
const title = ref<string>('');
const currentId = ref<number | string>(0);
const openModal = (type: string, id?: number | string | undefined) => {
	title.value = type === 'add' ? '新增数据字典' : '编辑数据字典';
	currentId.value = id || 0;
	visible.value = true;
};

</script>

<style scoped lang="scss">
@use '@/assets/style/mixin' as mixin;
@include mixin.reset-el-collapse;
@include mixin.reset-el-card;

.page-header-container {
	.el-form-item {
		width: 240px;
		margin-bottom: 16px;
	}
}
</style>
